<html xmlns:th="http://www.thymeleaf.org">

<nav th:fragment="topMenu(isribbon)">
    <!-- 彩带 -->
    <div th:if="${isribbon eq true}" id="awwwards" class="right black">
        <a href="#" target="_blank">best websites of the world</a>
    </div>
    <!-- END彩带 -->
    <!-- 预加载器 -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>
    <!-- 顶部导航栏 -->
    <nav role="navigation" class="navbar navbar-static-top">
        <div class="container-fluid">
            <!-- 手机端的和切换分组，以更好的移动显示 -->
            <div class="navbar-header">
                <button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle"
                        type="button">
                    <span class="entypo-menu"></span>
                </button>
                <button class="navbar-toggle toggle-menu-mobile toggle-left" type="button">
                    <span class="entypo-list-add"></span>
                </button>


                <div id="logo-mobile" class="visible-xs">
                    <h1>用户管理<span>v2</span></h1>
                </div>

            </div>


            <!-- 右侧顶部-->
            <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
                <!-- 右侧顶部 日期 时间  天气预报  div-->
                <div id="nt-title-container" class="navbar-left running-text visible-lg">
                    <!-- 日期空间 -->
                    <ul class="date-top">
                        <li class="entypo-calendar" style="margin-right:5px"></li>
                        <li id="Date"></li>
                    </ul>
                    <!--end 日期空间 -->
                    <!-- 时间DIV -->
                    <ul id="digital-clock" class="digital">
                        <li class="entypo-clock" style="margin-right:5px"></li>
                        <li class="hour"></li>
                        <li>:</li>
                        <li class="min"></li>
                        <li>:</li>
                        <li class="sec"></li>
                        <li class="meridiem"></li>
                    </ul>
                    <!--end 时间DIV -->
                    <!-- 天气预报div -->
                    <ul id="nt-title">
                        <li><i class="wi-day-lightning"></i> <span></span>
                            <span></span><span>今日天气预报</span>
                        </li>
                        <!--                        <li><i class="wi-day-lightning"></i> <span-->
                        <!--                                th:text="${'&#160;&#160;'+session.todayWeather.date}"></span>-->
                        <!--                            </i>-->
                        <!--                        </li>-->

                        <li><i class="wi-day-lightning"></i> <b>白天天气</b><span>晴天</span>
                            </i>
                        </li>

                        <li><i class="wi-day-lightning"></i> <b>白天温度</b><span>28 °C</span>
                            </i>
                        </li>

                        <li><i class="wi-day-lightning"></i> <b>白天风力</b><span>三级</span>
                            </i>
                        </li>
                        <li><i class="wi-day-lightning"></i> <b>晚上天气</b><span>阴天</span>
                            </i>
                        </li>

                        <li><i class="wi-day-lightning"></i> <b>晚上温度</b><span>22 °C</span>
                            </i>
                        </li>

                        <li><i class="wi-day-lightning"></i> <b>晚上风力</b><span>二级</span>
                            </i>
                        </li>

                    </ul>
                    <!--end 天气预报div -->
                </div>
                <!-- end 右侧顶部 日期 时间  天气预报 -->

                <!-- 右侧顶部 头像设置-->
                <ul style="margin-right:0;" class="nav navbar-nav navbar-right">
                    <!-- 头像设置 -->
                    <li>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <img alt="" class="admin-pic img-circle"
                                 th:src="@{/admin/getHeadPic?d='+new Date()*1}"><span
                                th:text="${'Hi,'+session.sessionUserName}"></span><b class="caret"></b>
                        </a>
                        <ul style="margin-top:14px;" role="menu" class="dropdown-setting dropdown-menu">
                            <li>
                                <a href="#" data-toggle="modal" data-target="#myModal">
                                    <span class="entypo-user"></span>&#160;&#160;头像</a>
                            </li>
                            <li>
                                <a href="#" data-toggle="modal" data-target="#myModal">
                                    <span class="entypo-vcard"></span>&#160;&#160;账号设置</a>
                            </li>
                            <!--                            <li>-->
                            <!--                                <a href="#">-->
                            <!--                                    <span class="entypo-lifebuoy"></span>&#160;&#160;Help</a>-->
                            <!--                            </li>-->
                            <li class="divider"></li>
                            <li>
                                <a th:href="@{/logout}">
                                    <span class="entypo-basket"></span>&#160;&#160; 退出</a>
                            </li>
                        </ul>
                    </li>
                    <!-- END头像设置 -->
                    <!-- 背景设置 -->
                    <li>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="icon-gear"></span>&#160;&#160;设置</a>
                        <ul role="menu" class="dropdown-setting dropdown-menu">

                            <li class="theme-bg">
                                <div id="button-bg"></div>
                                <div id="button-bg2"></div>
                                <div id="button-bg3"></div>
                                <div id="button-bg5"></div>
                                <div id="button-bg6"></div>
                                <div id="button-bg7"></div>
                                <div id="button-bg8"></div>
                                <div id="button-bg9"></div>
                                <div id="button-bg10"></div>
                                <div id="button-bg11"></div>
                                <div id="button-bg12"></div>
                                <div id="button-bg13"></div>
                            </li>
                        </ul>
                    </li>
                    <!--END 背景设置 -->

                    <!-- 顶部右侧隐藏按钮 -->
                    <li class="hidden-xs">
                        <a class="toggle-left" href="#">
                            <span style="font-size:20px;" class="entypo-list-add"></span>
                        </a>
                    </li>
                    <!-- END顶部右侧隐藏按钮 -->
                </ul>
                <!-- end 右侧顶部 头像设置-->
            </div>
            <!-- end 右侧顶部 -->
        </div>
    </nav>
    <!-- /结束顶部导航条 -->
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">&times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">修改个人信息</h4>
                </div>
                <div class="container">
                    <div class="col-sm-2">
                        <img th:src="@{/admin/getHeadPic?d='+new Date()*1}"
                             class="img-responsive img-circle img-thumbnail "
                             id="headerPicture" alt="Me">
                    </div>

                    <div id="" class=" col-sm-4">
                        <form id="updateForm" enctype="multipart/form-data">
                            <div class="rows">
                                <label>姓名:</label> <input type="text" placeholder="姓名"
                                                          class="form-control" name="userName" id="userName"
                                                          value=" ">
                            </div>
                            <div class="rows">
                                <label>密码:</label> <input type="password" placeholder="密码"
                                                          class="form-control" name="userPassword" id="userPassword"
                                                          value="">
                            </div>
                            <div class="rows">
                                <label>确认密码:</label> <input type="password" placeholder="确认密码"
                                                            class="form-control" name="confirm" id="confirm" value="">
                            </div>
                            <div class="rows ">
                                <label for="pic" class="btn btn-default">更换头像</label> <input
                                    type="file" accept="image/gif, image/jpeg,image/jpg,image/png"
                                    class="btn btn-default" style="display: none;"
                                    onchange="headerPic(this)" id="pic" name='uploadFile' value=""/>
                            </div>

                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        取消
                    </button>
                    <button type="submit" class="btn btn-primary">提交更改</button>
                </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <!-- end 模态层 -->
    <script>

    </script>
</nav>




